<template>
    <el-autocomplete v-model="state" :fetch-suggestions="querySearch" popper-class="my-autocomplete" placeholder="商品名称或商品货号"
        @select="handleSelect">
        <template #suffix>
        </template>
        <template #default="{ item }">
            <div class="value" style="display: flex;justify-content: space-between;">
                <span>{{ item.name }}</span>
                <span> {{ item.id }}</span>
            </div>
        </template>
    </el-autocomplete>
    <el-button type="primary" @click="handleIconClick">添加</el-button>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import * as http from '@/request/http'
const keyword = ref<string>('')
let dataList = ref<IProductSimpleListModel[]>([])
const state = ref('')
let links = ref<IProductSimpleListModel[]>([])

const querySearch = (queryString: string, cb: any) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value
    cb(results)
    keyword.value = state.value
    queryList()
    // console.log(loadAll());

}
const createFilter = (queryString: any) => {
    return (restaurant: any) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
const queryList = () => {
    http.product.getProductSimpleList(keyword.value).then(res => {
        if (res.code == 200) {
            dataList.value = res.data
        }
    })
}
const loadAll = () => {
    return dataList.value
}
const handleSelect = (_item: any) => {
    // console.log(item)
    // state.value = item.name
}
const emits = defineEmits<{
    (e: "hdAdd", e2: any): void
}>()

const handleIconClick = (_ev: Event) => {
    emits('hdAdd', state.value)
    // console.log(ev)
}
onMounted(() => {
    links.value = loadAll()
})

</script>
  
<style>
.my-autocomplete li {
    line-height: normal;
    padding: 7px;
}

.my-autocomplete li .name {
    text-overflow: ellipsis;
    overflow: hidden;
}

.my-autocomplete li .addr {
    font-size: 12px;
    color: #b4b4b4;
}

.my-autocomplete li .highlighted .addr {
    color: #ddd;
}
</style>
  


